import { React, useEffect, useRef, useState } from "react";
import "./top.scss";
// import EchartsTest from './EchartsTest';
import * as echarts from "echarts";

export default function Index() {
  const ech = useRef(null);
  const settings = JSON.parse(localStorage.getItem("settings")) || {};
  const [menu, setMenu] = useState(settings.zoomMode);
  const [styles, setstyles] = useState(settings.colorData);
  const [colors, setcolors] = useState(settings.colors);
  function getline() {
    let chartInstance = echarts.init(ech.current);
    chartInstance.clear()
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'line' // 默认为直线，可选为：'line' | 'shadow'
        },
        backgroundColor: "rgba(0,0,0,0.5)",
        textStyle: {
          color: styles[colors][0] //设置文字颜色
        },
      },
      legend: {
        textStyle: {
          color: styles[colors],
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          axisLabel: {
            textStyle: {
              show: true,
              color: styles[colors][0],
            },
          },
          nameTextStyle: {
            //y轴上方单位的颜色
            color: styles[colors][0],
          },

        },
      ],
      yAxis: [
        {
          type: "value",
          name: "时间/小时",
          axisLabel: {
            textStyle: {
              show: true,
              color: styles[colors][0],
            },
          },
          nameTextStyle: {
            //y轴上方单位的颜色
            color: styles[colors][0],
          },
          splitLine: { show: false },
        },
      ],
      color: styles[colors],
      series: [
        {
          name: "吃饭",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "睡觉",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "工作",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "学习",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "其他",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
      ],
    };
    chartInstance.setOption(option);

    option && window.addEventListener("resize", function () {
      chartInstance.resize();
    });
  }
  useEffect(() => {
    getline()
    if (settings.chartRefreshPeriod) {
      const timer = setInterval(() => {
        getline();
      }, settings.chartRefreshPeriod * 1000)
      return () => clearInterval(timer)
    }
  });

  function MenuItem({ menu }) {
    console.log(`MenuItem`, menu, 78987897978789787978978978978978);
    switch (menu) {
      case "stretch":
        return (
          <div
            id="ech"
            ref={ech}
            style={{ width: "25vw", height: "320px", margin: "0 auto" }}
          ></div>
        );
      case "cover":
        return (
          <div
            id="ech"
            ref={ech}
            style={{ width: "100%", height: "350px", margin: "0 auto" }}
          ></div>
        );
      case "contain":
        return (
          <div
            id="ech"
            ref={ech}
            style={{ width: "100%", height: "34vh", margin: "0 auto" }}
          ></div>
        );
      default:
        return (
          <div
            id="ech"
            ref={ech}
            style={{ width: "25vw", height: "320px", margin: "0 auto" }}
          ></div>
        );
    }
  }

  return (
    <>
      <div className="top1">
        <h3>一周时间分布</h3>
        <MenuItem menu={menu}></MenuItem>
        {/* <div ref={ech} style={{ width: "100%", height: "280px" }}></div> */}
      </div>
    </>
  );
}
